<template>
	<u-popup v-model="isShow" :closeable="false" border-radius="20" mode="bottom" @close="onPopupClose">
		<view class="popup-view2 f-col r-center">
			<view class="popup-list f-col r-center" style="margin-bottom:0;">
				<view class="popup-item f-col r-center c-center" 
						style="height:90rpx"
						v-for="(item, index) in showTextAry" :key="index" 
						@click="onClickItem(index)">
					<text class="show-text">{{item}}</text>
				</view>
				<view class="popup-item f-col r-center c-center"
						style="height:90rpx"
						@click="onPopupClose">
					<text class="show-text">取消</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false
			};
		},
		props: {
			showPopup: {
				type: Boolean,
				default: false
			},
			showTextAry: {
				type: Array,
				default: []
			},
		},
		watch: {
			showPopup(v) {
				this.isShow = v;
			}
		},
		onLoad() {
			
		},
		methods: {
			onPopupClose() {
				this.isShow = false;
				this.$emit("onClose");
			},
			onClickItem(idx) {
				this.isShow = false;
				this.$emit("onClickItem", idx);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/app.scss";
	.show-text{
		font-size: 28rpx !important;
		color: #000 !important;
	}
</style>